<template>
  <div class="ranking-list">
    <Header title="排行榜" go-back="true"></Header>
    <div class="rank-box">
      <div class="album">
        <Row :gutter="6">
          <i-col span="8" v-for="(top, tindex) in topArr" :key="tindex" @click.native="goTopDetail(top.name)">
            <div class="grid_div" :style="{backgroundImage: 'url(' + top.coverImgUrl + ')'}">
              <div class="video-num">
                <span>{{top.updateFrequency}}</span>
              </div>
            </div>
            <h3>{{top.name}}</h3>
          </i-col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import {topList} from '../../../api/node'
import {Toast} from 'mint-ui'

export default {
  name: 'rankingList',
  data () {
    return {
      topArr: []
    }
  },
  beforeRouteEnter: (to, from, next) => {
    if (from.name === 'TopDetail') {
      to.meta.isBack = true
    }
    next()
  },
  activated () {
    if (!this.$route.meta.isBack) {
      this._topList()
    }
    this.$route.meta.isBack = false
  },
  // created () {
  //   this._topList()
  // },
  methods: {
    _topList () {
      topList().then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.topArr = res.list
          // console.log(this.topArr)
        }
      })
    },
    goTopDetail (name) {
      var kry = '' // 记录每个排行榜的key值用于后期排行榜详情数据的需要
      var vname = name
      switch (vname) {
        case '云音乐新歌榜':
          kry = 0
          break
        case '云音乐热歌榜':
          kry = 1
          break
        case '网易原创歌曲榜':
          kry = 2
          break
        case '云音乐飙升榜':
          kry = 3
          break
        case '云音乐电音榜':
          kry = 4
          break
        case 'UK排行榜周榜':
          kry = 5
          break
        case '美国Billboard周榜':
          kry = 6
          break
        case 'KTV嗨榜':
          kry = 7
          break
        case 'iTunes榜':
          kry = 8
          break
        case 'Hit FM Top榜':
          kry = 9
          break
        case '日本Oricon周榜':
          kry = 10
          break
        case '韩国Melon排行榜周榜':
          kry = 11
          break
        case '韩国Mnet排行榜周榜':
          kry = 12
          break
        case '韩国Melon原声周榜':
          kry = 13
          break
        case '中国TOP排行榜(港台榜)':
          kry = 14
          break
        case '中国TOP排行榜(内地榜)':
          kry = 15
          break
        case '香港电台中文歌曲龙虎榜':
          kry = 16
          break
        case '华语金曲榜':
          kry = 17
          break
        case '中国嘻哈榜':
          kry = 18
          break
        case '法国 NRJ EuroHot 30周榜':
          kry = 19
          break
        case '台湾Hito排行榜':
          kry = 20
          break
        case 'Beatport全球电子舞曲榜':
          kry = 21
          break
        case '云音乐ACG音乐榜':
          kry = 22
          break
        case '云音乐嘻哈榜':
          kry = 23
          break
      }
      if (kry) {
        this.$router.push('/TopDetail/' + kry)
      } else {
        Toast({
          message: '抱歉！该排行榜没有详情',
          position: 'middle',
          duration: 2500
        })
      }
    }
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.ranking-list{
  width: 100%;
  padding-top: 50px;
  .rank-box{
    width: 100%;
    padding: 10px;
    .album{
      padding-top: 10px;
      .ivu-row{
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .ivu-col-span-8 {
        padding-bottom: 20px;
        .grid_div{
          text-align: center;
          height: 100px;
          background-size: 100% 100%;
          position: relative;
          .video-num{
            /*width: 60px;*/
            width: 100%;
            height: 20px;
            background: rgba(0,0,0,0.3);
            position: absolute;
            bottom: 0;
            img{
              width: 20px;
              float: left;
            }
            span{
              color: #fff;
              float: left;
              line-height: 20px;
              padding-left: 10px;
              padding-right: 5px;
            }
          }
        }
        h3{
          font-weight: normal;
          font-size: 15px;
          padding-top: 10px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
